<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <title>飞马云播-固定翼</title>
    <link rel="stylesheet" type="text/css" href="/css/vendor/cmp-controls.css">
    <link type="text/css" rel="stylesheet/less" href="/css/vendor/cloud-play-fix-wing.less">
    <script src="/js/less.min.js"></script>
</head>
<body bgcolor="#A1A1A1">
<!-- 地图 -->
<div id="map-widget" class="map-widget-full">
    <div id="map-container" class="map-wrap"></div>
    <div id="map-status-bar" class="map-status-bar">
        <div id="map-full-screen-icon"></div>
        <div class="coor" id="map-coor"></div>
    </div>
</div>

<!-- 顶部状态栏 -->
<div class="status-bar">
    <!-- 左边栏 -->
    <img id="more-mission-info" onClick="clickMoreMissionInfo()"
         src="/images/cloudplay/fix_asset/more_info.png">
    <section class="drone-type" onClick="clickMoreMissionInfo()" id="project-plane-type">未知</section>
    <section id="mission-status"></section>

    <!-- 右边栏 -->
    <div class="widget-controller-center">
        <div id="controller-btn" class="widget-controller"></div>
    </div>

    <div class="pdop-gps">
        <section class="pdop">PDOP: <span id="pdop">0</span></section>
        <section class="gps-type">GPS: <span id="gps-type">None</span></section>
    </div>

    <div class="gps-count">
        <div class="float-right">
            <div class="status-bar-hv-center">
                <img src="/images/cloudplay/fix_asset/gps.png" class="status-bar-right-icon"/>
            </div>
        </div>

        <section id="gps-count" class="status-bar-right-item">0</section>
    </div>

    <div class="status-bar-right-item">
        <div class="status-bar-vertical-line float-right"></div>
        <div class="float-right">
            <div class="status-bar-hv-center">
                <img id="radio-status" src="/images/cloudplay/fix_asset/radio_status.png"
                     class="status-bar-right-icon"/>
            </div>
        </div>
        <div class="status-bar-vertical-line float-right"></div>
    </div>

    <div class="float-right">
        <div class="status-bar-hv-center">
            <img id="drone-battery-status" src="/images/cloudplay/fix_asset/battery_100.png"
                 class="status-bar-right-icon"/>
        </div>
    </div>

    <section id="drone-battery-percent" class="status-bar-right-item">0%</section>

</div>

<!-- 控件菜单 -->
<div id="widget-menu" class="widget-menu" style="display: none;">
    <div id="data-recorder-btw-wrap" class="widget-menu-button">
        <div class="menu-wrap">
            <div class="check-box"></div>
            <div class="des">数据记录器</div>
        </div>
    </div>
    <div id="dashboard-btw-wrap" class="widget-menu-button">
        <div class="menu-wrap">
            <div class="check-box" checked></div>
            <div class="des">仪表盘</div>
        </div>
    </div>
    <div id="flight-data-btw-wrap" class="widget-menu-button">
        <div class="menu-wrap">
            <div class="check-box" checked></div>
            <div class="des">飞行数据</div>
        </div>
    </div>
    <div id="live-player-btw-wrap" class="widget-menu-button">
        <div class="menu-wrap">
            <div class="check-box"></div>
            <div class="des">直播</div>
        </div>
    </div>
    <div id="map-btw-wrap" class="widget-menu-button">
        <div class="menu-wrap">
            <div class="check-box" checked></div>
            <div class="des">地图</div>
        </div>
    </div>
</div>

<!-- 左表盘 -->
<div class="attitude-dashboard-container" style="display: block;">
    <div id="dial">
        <div id='dial_bg'>
            <img class="bg" src="/images/cloudplay/fix_asset/dial_bg.png"/>
            <img class="pointer" src='/images/cloudplay/fix_asset/red_dial_pointer.png'/>
        </div>
        <img src="/images/cloudplay/fix_asset/dial_pointer.png" id='dial_pointer'/>
        <div id="dial_num">
            <div class="roll">000°</div>
            <div class="pitch">000°</div>
            <div class="yaw"><span id="dial_direction">北</span> 000°</div>
        </div>
    </div>
</div>

<!-- 详细任务信息 -->
<div id="mission-info-container">
    <section class="mission-info-title">任务信息</section>
    <section class="mission-info-subtitle">用户信息</section>
    <div class="mission-info-user">
        <ul class="mission-info-left-name-list">
            <li class="mission-info-li">用户昵称</li>
            <li class="mission-info-li">用户手机号</li>
        </ul>
        <ul class="mission-info-left-value-list">
            <li class="mission-info-li"><?= $flightMission['nickname'] ?></li>
            <li class="mission-info-li"><span><?= $flightMission['phone'] ?></span></li>
        </ul>
    </div>
    <section
            class="mission-info-subtitle"><?= $flightMission['survey_area_name'] ?></section>
    <div class="mission-info-project">
        <ul class="mission-info-left-name-list">
            <li class="mission-info-li">飞机型号</li>
            <li class="mission-info-li">相机类型</li>
            <li class="mission-info-li">GSD</li>
            <li class="mission-info-li">航线重叠</li>
            <li class="mission-info-li">海拔高度</li>
            <li class="mission-info-li">航线间距</li>
            <li class="mission-info-li">默认空速</li>
            <li class="mission-info-li">任务面积</li>
        </ul>
        <ul class="mission-info-left-value-list">
            <li class="mission-info-li"><span id="info-drone-type"></span></li>
            <li class="mission-info-li"><span id="info-camera-type"><?= $flightMission['camera_type'] ?></span></li>
            <li class="mission-info-li"><span id="info-gsd"><?= $flightMission['average_ground_resolution'] ?></span>cm
            </li>
            <li class="mission-info-li"><span
                        id="info-heading-overlap"><?= $flightMission['longitudinal_overlap'] ?></span>%
            </li>
            <li class="mission-info-li"><span id="info-altitude"><?= $flightMission['flight_altitude'] ?></span>m</li>
            <li class="mission-info-li"><span id="info-route-spacing"><?= $flightMission['flight_interval'] ?></span>m
            </li>
            <li class="mission-info-li"><span
                        id="info-default-air-speed"><?= $flightMission['default_air_speed'] ?></span>m/s
            </li>
            <li class="mission-info-li"><span id="info-estimated-area"><?= $flightMission['work_area'] ?></span>km&sup2;
            </li>
        </ul>
        <ul class="mission-info-right-name-list">
            <li class="mission-info-li">比例尺</li>
            <li class="mission-info-li">旁向重叠</li>
            <li class="mission-info-li">飞行高度</li>
            <li class="mission-info-li">拍照间距</li>
            <li class="mission-info-li">预计时间</li>
            <li class="mission-info-li">预计里程</li>
        </ul>
        <ul class="mission-info-right-value-list">
            <li class="mission-info-li"><span id="info-scale"><?= $flightMission['work_scale'] ?></span></li>
            <li class="mission-info-li"><span id="info-side-overlap"><?= $flightMission['lateral_overlap'] ?>%</span>
            </li>
            <li class="mission-info-li"><span
                        id="info-flight-height"><?= $flightMission['flight_relative_altitude'] ?></span>m
            </li>
            <li class="mission-info-li"><span id="info-photo-spacing"><?= $flightMission['take_pic_interval'] ?></span>m
            </li>
            <li class="mission-info-li"><span id="info-estimated-duration"><?= $flightMission['work_time'] ?></span>min
            </li>
            <li class="mission-info-li"><span
                        id="info-estimated-miles"><?php echo number_format($taskInfo['total_mileage'],1) ?></span>km
            </li>
        </ul>
    </div>
    <section class="mission-info-subtitle">飞行信息</section>
    <div class="mission-info-flight">
        <ul class="mission-info-left-name-list">
            <li class="mission-info-li">飞行日期</li>
            <li class="mission-info-li">开始时间</li>
            <li class="mission-info-li">结束时间</li>
            <li class="mission-info-li">实际用时</li>
            <li class="mission-info-li">航线起点</li>
            <li class="mission-info-li">降落位置</li>
            <li class="mission-info-li">降落方式</li>

            <li class="mission-info-li">实际拍照</li>
            <li class="mission-info-li">实际飞行</li>
        </ul>
        <ul class="mission-info-left-value-list">
            <li class="mission-info-li"><span
                        id="info-mission-date"><?= date('Y-m-d', strtotime($flightMission['created_at'])) ?></span></li>
            <li class="mission-info-li"><span
                        id="info-mission-begin-time"><?= date('H:i:s', strtotime($uasInfo[0]['created_at'])) ?></span>
            </li>
            <li class="mission-info-li"><span
                        id="info-mission-end-time"><?= isset($uasInfo[1]) ? date('H:i:s', strtotime($uasInfo[1]['created_at'])) : '------'; ?></span>
            </li>
            <li class="mission-info-li"><span id="info-mission-practical-time"><?php
                    if (isset($uasInfo[1])) {
                        $times = strtotime($uasInfo[1]['created_at']) - strtotime($uasInfo[0]['created_at']);

                        $h = floor($times / 3600);
                        $times = $times % 3600;
                        $i = floor($times / 60);
                        $s = $times % 60;

                        $h = $h < 0 ? "0" . $h : $h;
                        $i = $i < 0 ? "0" . $i : $i;
                        $s = $s < 0 ? "0" . $s : $s;

                        echo "$h:$i:$s";
                    } else {
                        echo '------';
                    }
                    ?></span>min
            </li>
            <li class="mission-info-li"><span
                        id="info-mission-start-position-lat"><?= $flightMission['home_lng'] ?></span>, <span
                        id="info-mission-start-position-lon"><?= $flightMission['home_lat'] ?></span></li>
            <li class="mission-info-li"><span
                        id="info-mission-landing-position-lat"><?= $flightMission['home_lng'] ?></span>, <span
                        id="info-mission-landing-position-lon"><?= $flightMission['home_lat'] ?></span></li>
            <li class="mission-info-li"><span
                        id="info-landing-type"><?= $flightMission['landing_method'] == 0 ? '伞降' : '滑降' ?></span></li>
            <li class="mission-info-li"><span
                        id="info-practical-photos"><?= empty($taskInfo['photo_count']) ? '------' : $taskInfo['photo_count']; ?></span>张
            </li>
            <li class="mission-info-li"><span id="info-practical-miles"><?php
                    if (isset($uasInfo[1])) {
                        echo($uasInfo[1]['uas_odometer_value'] - $uasInfo[0]['uas_odometer_value']);
                    } else {
                        echo '------';
                    }
                    ?></span>km
            </li>
        </ul>
    </div>
    <section class="mission-info-subtitle">飞机信息</section>
    <div class="mission-info-drone">
        <ul class="mission-info-left-name-list">
            <li class="mission-info-li">飞机编号</li>
            <li class="mission-info-li">持有单位</li>
            <li class="mission-info-li">累计飞行</li>
            <li class="mission-info-li">钥匙编号</li>
            <li class="mission-info-li">钥匙有效期</li>

        </ul>
        <ul class="mission-info-left-value-list">
            <li class="mission-info-li"><span
                        id="info-drone-sn"><?= empty($planeInfo) ? '------' : $planeInfo['uas_serial_id'] ?></span></li>
            <li class="mission-info-li"><span><?= $planeInfo['name'] ?></span></li>
            <li class="mission-info-li"><span
                        id="info-total-flight-miles"><?= $lastUas['uas_odometer_value'] ?></span>km
            </li>
            <li class="mission-info-li"><span
                        id="info-key-sn"><?= empty($keyInfo) ? '------' : $keyInfo['key_id'] ?></span></li>
            <li class="mission-info-li"><span id="info-key-valid-period"><?php if (!empty($plane)) {
                        echo $plane['type'] == 0 ? '永久' : $plane['expired_at'];
                    } else {
                        echo '------';
                    }
                    ?></span></li>
        </ul>
    </div>

</div>

<!-- 飞行提示 -->
<div id="flight-tip" style="visibility: hidden">
    <div id="flight-tip-pilot">
        <div class="pilot-hv-center">
            <img id="pilot-icon" src="/images/cloudplay/fix_asset/pilot.png"/>
        </div>
    </div>

    <section id="flght-tip-content">一切就绪请逆风抛放飞机</section>
</div>

<!-- 飞行数据 -->
<div class="flight-data-container" style="display: block;">
    <div class="flight-data">
        <div style="position: absolute; left: 0px;top: 0px; height: 100%;">
            <img class="drone-pilot-distance-icon" src="/images/cloudplay/fix_asset/drone_pilot_distance.png"/>
            <section class="drone-pilot-distance-content"><span id="drone-pilot-direction">方向</span> <span
                        id="drone-pilot-distance">0km</span></section>
            <img class="drone-position-icon" src="/images/cloudplay/fix_asset/drone_position.png"/>
            <section class="drone-position-lat">北纬 &nbsp;<span id="drone-position-lat">0.000000</span>&deg;
            </section>
            <section class="drone-position-lon">东经 &nbsp;<span id="drone-position-lon">0.000000</span>&deg;
            </section>
        </div>

        <div style="position: absolute; left: 220px;top: 8px; height: 28%; width: 600px;">
            <img style="position: absolute; left:14px; top: 4px;" src="/images/cloudplay/fix_asset/wing_speed.png"/>
            <label style="position: absolute; left:52px; top: 4px; line-height: 30px;"><span id="wing-speed">00</span>m/s</label>
            <img style="position: absolute; left:162px; top: 4px;" src="/images/cloudplay/fix_asset/ground_speed.png"/>
            <label style="position: absolute; left:200px; top: 4px; line-height: 30px;"><span
                        id="ground-speed">00</span>m/s</label>
            <img style="position: absolute; left:326px;" src="/images/cloudplay/fix_asset/flight_miles.png"/>
            <label style="position: absolute; left:360px; top: 4px; line-height: 30px;"><span id="flight-miles">0</span>km</label>
            <img style="position: absolute; left:472px; top: 4px;"
                 src="/images/cloudplay/fix_asset/flight_duration.png"/>
            <label style="position: absolute; left:508px; top: 4px; line-height: 30px;"><span id="flight-duration">00:00:00</span></label>
        </div>

        <div style="position: absolute; left: 220px; bottom: 8px; height: 57%; width: 320px;">
            <div style="height: 38%; position: relative;">
                <label style="font-size: 0.8em; line-height: 28px;">目标空速 &nbsp;<span style="font-size: 1.3em"><span
                                id="target-air-speed"></span>m/s</span></label>
                <label style="font-size: 0.8em; line-height: 28px; position: absolute; left: 146px;">目标高度 &nbsp;<span
                            style="font-size: 1.3em"><span id="target-height">0</span>m</span></label>
            </div>
            <div style="position: relative; bottom: 2px;">
                <img style="position: absolute; left:0px; top: 12px; max-width: 64px; max-height: 64px;"
                     src="/images/cloudplay/fix_asset/air_speed.png"/>
                <label
                        style="position: absolute; left: 70px; font-size: 2.2em; color: #1abc9c; line-height: 60px;"><span
                            id="air-speed">0</span></label>
                <img style="position: absolute; left: 146px; top: 12px; max-width: 64px; max-height: 64px;"
                     src="/images/cloudplay/fix_asset/drone_height.png"/>
                <label
                        style="position: absolute; left: 216px; font-size: 2.2em; color: #3a88f4; line-height: 60px;"><span
                            id="drone-height">0</span></label>
            </div>
        </div>

        <div style="position: absolute; left: 560px; bottom: 8px; height: 57%;">
            <section style="font-size: 0.8em; margin-top: 4px;">机身表面温度</section>
            <section>
                <img style="max-height: 41px; max-width: 30px;margin: 8px 4px 8px 8px;"
                     src="/images/cloudplay/fix_asset/thermometer.png"/>
                <span id="drone-surface-temperature"
                      style="font-size: 2.0em; margin-bottom: 20px;vertical-align: top; line-height: 60px;">0</span>
                <span style="font-size: 2.0em; margin-bottom: 20px;vertical-align: top; line-height: 60px;">&deg;</span>
            </section>
        </div>

        <div style="position: absolute; left: 690px; bottom: 8px; height: 57%;">
            <img src="/images/cloudplay/fix_asset/photo_count.png"
                 style="max-width: 28px; max-height: 28px; position: absolute; top: 10px;"/>
            <section style="position: absolute; left: 38px; top: 10px; line-height: 30px;"><span id="photo-count">0</span>
            </section>
            <img src="/images/cloudplay/fix_asset/route_point_count.png"
                 style="max-width: 28px; max-height: 28px; position: absolute; bottom: 2px;"/>
            <section style="position: absolute; left: 38px; bottom: 2px; line-height: 25px;"><span
                        id="finished-point-count">0</span>/<span
                        id="total-point-count">0</span></section>
        </div>

        <!-- 描线 -->
        <div
                style="position: absolute; width: 2px; background-color: rgb(71, 60, 86); top: 5px; bottom: 5px; left: 204px;"></div>
        <div
                style="position: absolute; height: 2px; background-color: rgb(71, 60, 86);  top: 45px; left: 204px; right: 10px;"></div>
        <div
                style="position: absolute; width: 2px; background-color: rgb(71, 60, 86); top: 45px; bottom: 5px; left: 540px;"></div>
        <div
                style="position: absolute; width: 2px; background-color: rgb(71, 60, 86); top: 45px; bottom: 5px; left: 676px;"></div>
    </div>
</div>

<!-- 播放工具条 -->
<div class="play-bar-container">
    <div class="play-bar">
        <img id="play-or-pause-button" src="/images/cloudplay/fix_asset/play_button.png"
             onClick="clickPlayOrPause(this)"/>

        <div id="play-progress-container">
            <div class="play-progress-line"></div>
            <div style="width: 100%; height: 100%; position: absolute;">
                <div id="play-progress-track">
                    <section id="play-progress-cursor" onMouseDown="_progressLabelIgnoreMouseDown(event)">02:13
                    </section>
                </div>
                <div id="play-progress-thumb"></div>
            </div>
            <section id="play-progress-duration" onMouseDown="_progressLabelIgnoreMouseDown(event)">03:32</section>
        </div>

        <section id="play-speed" onClick="showPlaySpeedList()">速度 X1</section>
    </div>
</div>

<!-- 播放速度列表 -->
<div class="play-speed-list-container">
    <div class="play-speed-list-container2">
        <ol id="play-speed-list">
            <li class="play-speed-list" onClick="playSpeedDidChanged(this)">速度 X8</li>
            <li class="play-speed-list" onClick="playSpeedDidChanged(this)">速度 X4</li>
            <li class="play-speed-list" onClick="playSpeedDidChanged(this)">速度 X2</li>
            <li class="play-speed-list" onClick="playSpeedDidChanged(this)">速度 X1</li>
        </ol>
    </div>
</div>

<!-- 右边按钮列表 -->
<ol class="right-control-list" style="display:none">
    <li><img onClick="clickRuler()" src="/images/cloudplay/fix_asset/ruler.png"/></li>
    <li class="right-control-group-header"><img onClick="setTestAreaToCenter()"
                                                src="/images/cloudplay/fix_asset/test_area_center.png"/></li>
    <li class="right-control-item"><img onClick="setDroneToCenter()"
                                        src="/images/cloudplay/fix_asset/drone_center.png"/></li>
    <li class="right-control-item"><img onClick="setLandingPositionToCenter()"
                                        src="/images/cloudplay/fix_asset/landing_center.png"/></li>
    <li class="right-control-group-header"><img onClick="setPhotoingPositionToCenter()"
                                                src="/images/cloudplay/fix_asset/photoing_position.png"/></li>
    <li class="right-control-item"><img onClick="toggleVoiceBroadcast(this)"
                                        src="/images/cloudplay/fix_asset/voice_broadcast.png"/></li>
</ol>

<!-- 二维码按钮 -->
<div class="qrcode-btn" onClick="clickQrcodeBtn()"></div>

<div class="original-data" style="display: none">


    <ul id="packages">
        <?php foreach ($packages as $package): ?>
        <li><?php echo $package ?></li>
        <?php endforeach; ?>
    </ul>
    <div id="endTime">
        <?php echo $endTime ?>
    </div>
    <div id="startTime">
        <?php echo $startTime ?>
    </div>
    <div id="curEndTime">
        <?php echo $curEndTime ?>
    </div>
    <div id="pageTotal">
        <?php echo $pageTotal ?>
    </div>
    <div id="survey_average_altitude">
        <?php echo $flightMission['survey_average_altitude']; ?>
    </div>
    <div id="flight_relative_altitude">
        <?php echo $flightMission['flight_relative_altitude'] ?>
    </div>
    <div id="flightMissionInfo">
        <?php echo $flightMissionInfo ?>
    </div>
    <div id="playType"><?php echo $playType; ?></div>
    <input type="hidden" id="socket" value="<?= $socket ?>">
    <input type="hidden" id="data_recorder_socket" value="<?= $recorderDataSocket ?>">
    <div id="correct_gps"><?= $needCorrect ?></div>
    <div id="planeWayCS"><?= $planeWayCS ?></div>
    <div id="locationCS"><?= $locationCS ?></div>
    <div id="recorderData"><?php echo $recorderData ?></div>
    <div id="video-play-path"><?php echo $videoPlayPath ?></div>
</div>

<!-- 视频播放窗口 -->
<div class="video-player" id="video-player" style="visibility:hidden">
    <div class="player-wrap" id="player-wrap">
        <div class="video-list">
            <div id="video-list-wrap"></div>
            <div class="video-list-btn"></div>
        </div>
        {#<video id="my-video" class="video-js" controls preload="auto" data-setup="{'autoplay':'true'}">#}
            {#<source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv">#}
        {#</video>#}
        <div id="my-video" class="video-js"></div>
        <div class="player-bg"></div>
    </div>
    <div class="player-status-bar" id="player-status-bar">
        <div class="live-icon">
            <span class="live-status"></span>
            <div class="icon-1 icon"></div><div class="icon-2 icon"></div><div class="icon-3 icon"></div><div class="icon-4 icon"></div>
        </div>
        <div id="player-full-screen-icon"></div>
    </div>
    <div class="coor" id="coor"></div>
</div>

</body>

<script src="/js/baidu-statistics.js"></script>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="/third-part/ckplayer/ckplayer.js"></script>
<script type="text/javascript" src="/js/vendor/common.js"></script>
<script type="text/javascript" src="/js/vendor/cmp-controls.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-fix-wing.js"></script>
{% include 'template/baseMap.volt' %}{% include 'template/baseMapKey.volt' %}
<script type="text/javascript" src="/js/vendor/transform.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-common.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-live.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/detail4fix.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-data-recorder.js"></script>



<script>
    // 二维码
    function clickQrcodeBtn() {
        if ($(".qrcode-wrap").length > 0) {
            $(".qrcode-wrap").remove();
        } else {
            $("body").append("<div class='qrcode-wrap'> \
                <div id='qrcode'></div> \
                <p class='des'>扫码手机观看</p> \
            </div>");

            var url="http://"+"<?php echo $_SERVER['HTTP_HOST'] ?>"+"/monitor/detail4fixPhone?local_id="+getQueryString("local_id");
            $('#qrcode').qrcode({
                render: "canvas",    // canvas方式
                width: 220,         // 宽度
                height: 220,        // 高度
                text: url           // 任意内容
            });
        }
    }

</script>
</html>
